<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="./assets/favicon.ico">
<title>Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="./assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="./assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="./assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="./assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="./index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.3.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://dev.naver.com/projects/jindo/forum" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="./index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="./classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								<span title="new" class="ic new"><span class="blind">new</span></span>
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="./classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="section_inn first">

	<div class="intro">
		<h3 class="h_txt_jd"><span class="blind">JindoJS는 nhn에서 제작한 javascript library입니다.</span></h3>
		<p>
			JindoJS Component는 JindoJS 를 기반으로 개발된
			재사용 가능한 독립적인 자바스크립트 모듈입니다. 
			JindoJS는 Javascript Application 제작시에 반복적으로 발생하는 로직을 컴포넌트화 하여 결과물의 품질을 향상시키기
			위한 목적으로 작성되었습니다.
		</p>
	</div>

	<!-- 다운로드 -->
	<div class="sc_dw">
		<h2>다운로드</h2>
		<table class="tbl_board">
		<caption class="hide">다운로드</caption>
		<colgroup>
		<col style="50%">
		<col style="50%">
		</colgroup>
		<tr>
		<th scope="row">전체 다운로드</th>
		<th scope="row">선택 다운로드</th>
		</tr>
		<tr>
		<td>
			<ul>
			<li>
				<span id="radio-zipped">
					<span class="radio-mark radio-checked"></span>
					<input type="radio" name="zipped" id="file_zipped" checked="checked" value="true">
				</span><label for="file_zipped">압축 함 (216KB)</label>
			</li>
			<li>
				<span id="radio-unzipped">
					<span class="radio-mark"></span>
					<input type="radio" name="zipped" id="file_unzipped" value="false">
				</span><label for="file_unzipped">압축 안 함 (665KB)</label>
			</li>
			</ul>
			<a href="http://jindo.dev.naver.com/utils/downloader/?target=jindo_component&action=download&version=1.3.0" target="_blank" class="btn_dw" onclick="doDownload(this); return false;">Download</a>
		</td>
		<td>
			<p>(선택 다운로드 페이지로 이동합니다.)</p>
			<a href="http://jindo.dev.naver.com/utils/downloader/?target=jindo_component&version=1.3.0" target="_blank" class="btn_dw">Go</a>
		</td>
		</tr>
		</table>
		<p class="version">버전 :<em>1.3.0</em></p>
	</div>
	<!-- // 다운로드 -->
</div>

<div class="section_inn">
	<h2>사용방법</h2>

	<div class="usage">
		우상단 전체 다운로드 또는 선택 다운로드 링크를 통해 JS 파일을 다운로드 받아 HTML 파일에 아래와 같이 삽입하여 사용합니다.

		<pre class="code"><code class="prettyprint">&lt;script type="text/javascript" src="jindo_component.js"&gt;&lt;/script&gt;</code></pre>
		
		만약 다른 이름으로 변경된 Jindo 와 함께 사용한다면
		<a href="http://jindo.dev.naver.com/utils/downloader/?target=jindo_component&version=1.3.0" target="_blank" class="btn_dw">선택 다운로드</a>의
		'상세옵션' 에서 변경 된 이름을 지정하여 다운로드 받거나,
		아래와 같이 파라미터를 지정하여 변경된 Jindo 의 이름을 지정 할 수 있습니다.
		
		<pre class="code"><code class="prettyprint">&lt;script type="text/javascript" src="jindo_component.js?jindo=FOO"&gt;&lt;/script&gt;</code></pre>
	</div>
</div>

<div class="section_inn">
	<h2>릴리즈 노트</h2>
	<div class="release">
		<ol>
		<li>
			<span class="date">2012-12-06</span>
			<a href="http://dev.naver.com/news/detail.php?news_id=928">Jindo Component 1.3.0 버젼이 릴리즈 되었습니다.</a>
		</li>
		<li>
			<span class="date">2012-09-27</span>
			<a href="http://dev.naver.com/news/detail.php?news_id=890">Jindo Component 1.2.0 버젼이 릴리즈 되었습니다.</a>
		</li>
		<li>
			<span class="date">2012-04-12</span>
			<a href="http://dev.naver.com/news/detail.php?news_id=789">Jindo Component 1.0.4 버젼이 릴리즈 되었습니다.</a>
		</li>
		<li>
			<span class="date">2011-12-02</span>
			<a href="http://dev.naver.com/news/detail.php?news_id=718">Jindo Component 1.0.2 버젼이 릴리즈 되었습니다.</a>
		</li>
		<li>
			<span class="date">2010-12-29</span>
			<a href="http://dev.naver.com/news/detail.php?news_id=546">Jindo Component 1.0.0 버젼이 릴리즈 되었습니다.</a>
		</li>
		</ol>
	</div>
	<a href="http://dev.naver.com/news/?group_id=29" class="btn_more">더보기<span class="ic"></span></a>
</div>

<div class="section_inn">
	<h2>지원환경</h2>

	<div class="support">
		<div class="support_list desktop">
			<strong class="tit">Desktop</strong>
			<ul>
			<li>
				<span title="Internet Explorer" class="ic ie">IE</span>6.0 이상
			</li>
			<li>
				<span title="Firefox" class="ic ff">Firefox</span>3.0 이상
			</li>
			<li>
				<span title="Safari" class="ic safari">safari</span>4.0 이상
			</li>
			<li>
				<span title="Opera" class="ic opera">opera</span>10.0 이상
			</li>
			<li>
				<span title="Chrome" class="ic chrome">chrome</span>2 이상
			</li>
			</ul>
		</div>
	</div>
	<p class="footnote"><i>[표1]</i> 현재 지원환경</p>
</div>
<script type="text/javascript">
	
	new jindo.CheckBox($('radio-zipped'), { sClassPrefix : 'radio-' });
	new jindo.CheckBox($('radio-unzipped'), { sClassPrefix : 'radio-' });
	
	function doDownload(anchor) {
		open(anchor.href + '&minified=' + $('file_zipped').checked, anchor.target);
	}
	
</script>
			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="./assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="./assets/hash.js"></script>
<script type="text/javascript" src="./assets/api-list.js"></script>
<script type="text/javascript" src="./assets/api-search.js"></script>
<script type="text/javascript" src="./assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "./";
	var projectAssets = "./assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>